<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="220px">
          <div class="菜单">
            <el-row class="tac">
              <el-col >
                <el-menu router
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose">
                  <el-submenu index="1">
                    <template slot="title">
                      <i class="el-icon-location"></i>
                      <span>个人中心</span>
                    </template>
                    <el-menu-item index="/ks">我的信息</el-menu-item>
                    <el-menu-item index="/tz">通知中心</el-menu-item>
                    <el-menu-item index="/gz">我的关注</el-menu-item>
                    <el-menu-item index="ls">观看历史</el-menu-item>
                  </el-submenu>
                </el-menu>
              </el-col>
            </el-row>
          </div>
          <div class="菜单">
            <el-row class="tac">
              <el-col >
                <el-menu router
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose">
                  <el-submenu index="2">
                    <template slot="title">
                      <i class="el-icon-video-camera-solid"></i>
                      <span>我的直播间</span>
                    </template>
                    <el-menu-item index="/kb">开播设置</el-menu-item>
                    <el-menu-item index="/xx">直播间信息</el-menu-item>
                    <el-menu-item index="/pk">PK设置</el-menu-item>
                  </el-submenu>
                </el-menu>
              </el-col>
            </el-row>
          </div>
          <div class="菜单">
            <el-row class="tac">
              <el-col >
                <el-menu router
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose">
                  <el-submenu index="1">
                    <template slot="title">
                      <i class="el-icon-video-camera-solid"></i>
                      <span>直播间信息</span>
                    </template>
                    <el-menu-item index="/zl">数据总览</el-menu-item>
                    <el-menu-item index="/tj">礼物统计</el-menu-item>
                    <el-menu-item index="/ph">消费排行</el-menu-item>
                  </el-submenu>
                </el-menu>
              </el-col>
            </el-row>
          </div>
        </el-aside>
        <el-main>
          <div class="标题">
            <h>我的信息</h>
          </div>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
          <span>
            <el-row >
          <div class="头像">
            <div class="demo-basic--circle">
              <div class="block" >
                <el-avatar :size="50" :src="circleUrl"></el-avatar>
              </div>
            </div>
          </div>
        </el-row>
            <div class="名字">淹死了一条鱼</div>
             <div class="idu">
               <i class="el-icon-user"></i>
          1234512
        </div>
            <div class="正式会员">
              正式会员
            </div>
            <div class="实名认证">
              实名认证
            </div>
          </span>
            </div>
            <div class="我的富吾币">
              我的富吾币：100
              <el-button class="充值" type="text" @click="open">
                <i class="el-icon-coin">充值</i>
              </el-button>
            </div>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
         <span>
           <div  class="卡片标题"> 个人收益
           </div>
         </span>
            </div>
            <div class="总账户">
              富吾币总账户
            </div>
            <br>
            <div class="账户余额">0
            </div>
            <div class="总账户">
              我的钱包
            </div>
            <a class="我的钱包" href="https://www.runoob.com/try/try.php?filename=trycss_link" target="_blank">点击查看</a>
            <div class="温馨提示">
              温馨提示：
              <br>
              1.账户类型说明：

              1）金仓鼠普通账户：每月1日将冻结上月收益的金仓鼠。自提主播将在每月5日左右充入快捷账户，转化完成之后将扣除冻结的金仓鼠。

              2）金仓鼠快捷账户：快捷账户仅开放给结算方式为在线自提的主播。仅快捷账户支持提现，比例为1000金仓鼠=1元。

              2.金仓鼠转化时间：观众通过iOS渠道购买充值的金瓜子打赏的道具或大航海产生的收益，将60天后入账金仓鼠账户；其他渠道充值的金瓜子打赏的道具或大航海产生的收益，将隔天入账到金仓鼠账户。

              3.金仓鼠总账户：金仓鼠普通账户+金仓鼠快捷账户

              4.提现规则说明：

              1）金额限制：周一至周五09:00~17:00可兑换（节假日等特殊原因除外），每天最多提现一次，每次可提1~2000元（特殊情况除外）

              2）到账时间：支付宝提现提交申请后，一般会在24小时到账。单笔提现超过2000元，一般会在7天之内到账。

              3）税费说明：每次发起提现时，系统会自动结算税费并展示给用户。
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
    <div>
  </div>
  </div>
</template>

<script>
export default {
  name: "kaishizhibo",
  data() {
    return {
      activeName: '1',
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        sizeList: ["large"]
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style >
body{ background-color:#EEEEEE}
.text {
  font-size: 14px;
}
.box-card {
  float:right;
  margin-right:3%;
  margin-left:3%;
  width:94%;
  margin-bottom: 5%;
}
.菜单
{
  margin-left:3%;
}
.标题
{
  position:relative;
  font-size:x-large;
  top:-20px;
  float:left;
  margin-left:3%;
}
.头像{
  position:relative;
  width:14%;
  height:auto;
  margin-left:2%;
  margin-top:2%;
  margin-bottom: 2%;
  float: left;
}
.名字 {
  position: absolute;
  top:230px;
  left:310px;
  font-size:large;
  float:left;
  margin-left:8%;
}
.idu{
  position: absolute;
  top:237px;
  left:550px;
  font-size:x-small;
  color:#8c939d;
}
.正式会员
{
  padding:2px;
  position: absolute;
  top:234px;
  color:#8c939d;
  border-radius:2px;
  left:620px;
  border: 1px solid #8c939d;
  font-size:xx-small;
}
.实名认证
{
  padding:2px;
  position: absolute;
  top:234px;
  color:#8c939d;
  border-radius:2px;
  left:682px;
  border: 1px solid #8c939d;
  font-size:xx-small;
}
.我的富吾币
{
  font-size:small;
  position: absolute;
  top:300px;
  left:900px;
  padding-bottom: 10px;

}
.卡片标题
{
  font-size: larger;
text-align: left;
}
.总账户
{
  position:relative;
  float:left;
  margin-left:3%;
}
.账户余额
{
  position:relative;
  font-size: larger;
  left:-400px;
  top:10px;
  color:#409EFF;
  margin-bottom: 40px;
}
.我的钱包
{
  position:relative;
  left:-187px;
  top:30px;
  font-size: small;
}
.温馨提示
{
  position:relative;
  top:-80px;
  width:50%;
  float:right;
  text-align: left;
  font-size:xx-small;
  color:#C0C0C0;

}
</style>
